<template>
	<div class="body">
		<Header :courseType="course_type"></Header>
		<div id="top" class="body-c" :class="{active:active}">
			<!-- 我的课程  -->
			<ul class="link">
				<li tag="div" class="link-item" @click="next(index)" :class="{active:index==isActive}" v-for="(item,index) in list"
				 :key="item">
					{{item}}
					<span></span>
				</li>
			</ul>
		</div>
		
		<div class="box">
			<!-- <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh"> -->
				<ul v-if="isActive == 0">
					<li class="kc" v-for="item in arr1" :key="item.name">
						<p class="kcname">
							<span class="name">{{item.name}}</span>
							<span class="pinfen">
								<img src="@/assets/homeimg/形状 3 拷贝 2.png" />
								<img src="@/assets/homeimg/形状 3 拷贝 2.png" />
								<img src="@/assets/homeimg/形状 3 拷贝 2.png" />
							</span>
						</p>
						<p class="jiyi">{{item.title}}</p>
						<div class="chakan">
							<div class="left">
								<!-- <span>学习了{{item.num}}遍</span> -->
								<!-- <img class="jiantou" src="@/assets/homeimg/滑动右.png" alt /> -->
							</div>
							<div class="right" @click="goreview(item.course_id)">
								<span>已开课 ></span>
								<!-- <img class="jiantou" src="@/assets/homeimg/滑动右.png" alt /> -->
							</div>
						</div>
					</li>

				</ul>
				<ul v-else>
					<li tag="li" class="kgde" v-for="item in arr2" :key="item.name" >
						<p class="kcname">
							<span class="name">{{item.name}}</span>
							<span class="pinfen">
								<img src="@/assets/homeimg/形状 3 拷贝 2.png" />
								<img src="@/assets/homeimg/形状 3 拷贝 2.png" />
								<img src="@/assets/homeimg/形状 3 拷贝 2.png" />
							</span>
						</p>
						<p class="jiyi">{{item.title}}</p>
						<div class="chakan">
							<div class="left">
								<!-- <span>学习了{{item.num}}遍</span>
							<img class="jiantou" src="@/assets/homeimg/滑动右.png" alt /> -->
							</div>
							<div class="right" @click="goreview(item.course_id)" :class="{active : item.type == 2}">
								<span v-if="item.type == 2" >去复习 ></span>
								<!-- <img class="jiantou" src="@/assets/homeimg/滑动右.png" alt /> -->
								<span v-if="item.type == 1" >已开课 ></span>
							</div>
						</div>
						<p class="bord"></p>
						<p class="time" @click="evaluate(item)">请对课程进行<span>评价></span></p>
					</li>
				</ul>
			<!-- </van-pull-refresh> -->
			<!-- <p class="footer-text">{{footerText}}</p>
			<p class="loading" v-show="loading"></p>
 -->
		</div>
	</div>
</template>
<script>
	import courseApi from '@/api/course';
	import Header from "@/components/header";
	export default {
		data() {
			return {
				isShow: true,
				isActive: 0,
				token: '',
				list: ["正在进行中", "历史购买记录"],
				arr1: [],
				arr2: [],
				isLoading: false,
				active: false,//iosor安卓
				// serverData: [], //接受服务器的数据,
				// page: 1,
				// footerText: '上滑加载更多',
				// loading: false //loading的开关
				course_type: 0,
			};
		},
		components: {
			// [Image.name]: Image
			Header
		},
		created() {
			window.scrollTo(0,0);
			if(this.$store.state.ios){
				this.active = true;
			}
			// if (localStorage.getItem("user")) {
			// 	var info = JSON.parse(localStorage.getItem("user"));
			// }
			// this.token = info.token;
			if(this.$route.query.course_type){
				this.course_type = this.$route.query.course_type
			}
			this.$store.commit('SAVE_TOKEN',this.$route.query.token);
			this.getcourselist(this.token, 1);
			this.getcourselist(this.token, 2);
			// this.getcourselithis.tokent(2);
		},
		methods: {
			onRefresh() {
				setTimeout(() => {
					// Toast('刷新成功');
					this.isLoading = false;
					// this.count++;
				}, 1000);
			},
			// getServerData(data) {
			// 	//参数只有page,项目需要可以添加
			// 	//项目中的ajax方式可能跟这个不一样，没关系，思路是相同的。
			// 	const num = 5; //每一页接受多少条数据

			// 	this.loading = false;
			// 	this.serverData = data; //接受数据
			// 	if (data.length < num) {
			// 		this.footerText = "到底了";
			// 		$(window).unbind('scroll');
			// 	}
			// },
			// listenScroll() {
			// 	let self = this;
			// 	$(window).scroll(function() {
			// 		let scrollTop = $(window).scrollTop();
			// 		let windowTop = $(window).height();
			// 		let documentTop = $(document).height();
			// 		if (documentTop - windowTop <= scrollTop) {
			// 			self.page++;
			// 			self.loading = true;
			// 			self.getServerData();
			// 		}
			// 	});
			// },
			goreview(id){
				window.h5_android && window.h5_android.goCourse(JSON.stringify({id}));
				window.webkit.messageHandlers.goReview_js.postMessage([id])
			},
			getcourselist(token, type) {
				this.$http.post('/api/curriculum/course',{type}).then(res => {
					// console.log(res)
					if(type == 1){
						this.arr1 = res.data.data;
					}else{
						this.arr2 = res.data.data;
					}
					this.page = res.data.current_page;
				})
				// courseApi.course({
				// 	token: token,
				// 	type: type
				// }).then(res => {
				// 	console.log(res);
				// 	this.arr1 = res.data.data;
				// 	this.arr2 = res.data.data;
				// 	this.page = res.data.current_page;
				// })

			},
			next(index) {
				this.isActive = index;
				// if (index == 0) {
				// 	this.isShow = true;
				// 	// this.getServerData(this.arr1);
				// } else {
				// 	this.isShow = false;
				// 	// this.getServerData(this.arr2);
				// }
			},
			returnGo() {
				// this.$router.go(-1);
				window.webkit.messageHandlers.pageBack_js_oc.postMessage([])
			},
			evaluate(item) {
				this.$router.push({path:"/evaluate",query:{item}});
			}
		}
	};
</script>
<style lang="scss" scoped="scoped">
	.body {
		color: #333333;
		height: 100%;
		display: flex;
		flex-direction: column;
		background: rgba(250, 250, 250, 1);
		background-size: 100% 100%;
		min-height: 100vh;
	}

	.footer-text {
		font-size: 0.75rem;
		text-align: center;
	}
	::v-deep .van-pull-refresh{
		min-height: 100vh;
	}
	.body-c {
		position: fixed;
		top: calc(11.7333vw + 0px);
		left: 0;
		width: 100%;
		background-color: #fff;
		z-index: 99;
		&.active{
			top: calc(11.7333vw + 24px);
		}
	}
	.link {
		width: 100%;
		height: 2.75rem;
		list-style: none;
		display: flex;
		margin: 0;
		padding: 0;
		background: rgba(255, 255, 255, 1);

		li {
			width: 50%;
			height: 100%;
			position: relative;
			font-size: 0.9375rem;
			text-align: center;
			line-height: 2.75rem;
			font-weight: bold;

			span {
				position: absolute;
				top: 2.75rem;
				left: 38%;
				width: 2.8125rem;
				height: 0.1875rem;
			}
		}

		.link-item {
			color: rgba(51, 51, 51, 1);

			span {
				background: transparent;
			}
		}

		.active {
			color: rgba(253, 151, 19, 1);

			span {
				background: rgba(253, 151, 19, 1);
			}
		}
	}

	.box {
		width: 100%;
		height: 100%;
		flex: 1;
		// padding: 0 0.9375rem 0 0.9375rem;
		margin: 0 auto;
		margin-top: 6.8rem;
		/deep/.van-pull-refresh{
			height: 100%;
		}
	}

	// 在scss文件中
	@supports(bottom:constant(safe-area-inset-top)) {

		// 如果存在底部安全区域
		.box {
			padding-top: constant(safe-area-inset-top);

		}

	}

	@supports(bottom:env(safe-area-inset-top)) {

		// 如果存在底部安全区域
		.box {
			padding-top: env(safe-area-inset-top);
            
		}

	}
	.kgde {
		width: 92vw;
		height: 9.375rem;
		margin: 0 auto;
		background: #fff;
		padding: 0 0.75rem;
		padding-top: 0.625rem;
		margin-top: 0.625rem;
		border-radius: .3125rem;
	}

	.kc {
		width: 92vw;
		height: 107px;
		margin: 0 auto;
		background: #fff;
		padding: 0 0.75rem;
		padding-top: 0.625rem;
		margin-top: 0.9375rem;
		border-radius: .3125rem;
	}

	.kcname {
		display: flex;
		justify-content: space-between;
	}

	.name {
		color: #333333;
		font-size: 1rem;
		font-weight: bold;
	}

	.jiyi {
		color: #333333;
		font-size: 1rem;
		height: 2.5rem;
		line-height: 2.5rem;
	}

	.chakan {
		display: flex;
		justify-content: space-between;
		color: #999999;
		font-size: 0.75rem;
		height: 1.25rem;
		line-height: 1.25rem;

		.left {
			display: flex;
		}

		.right {
			display: flex;
			width: 5rem;
			height: 1.5rem;
			background: #FF9D5E;
			border-radius: 0.75rem;
			justify-content: center;
			line-height: 1.5rem;
			span {
				// margin-left: .9375rem;
				color: #FFFFFF
			}
			&.active{
				background: #FAFAFA;
				
				span{
					color:rgba(153,153,153,1);
				}
			}
		}

	}

	.jiantou {
		display: block;
		width: 0.375rem;
		height: 0.625rem;
		margin-top: .375rem;
		margin-left: .5rem;
	}

	.bord {
		width: 100%;
		border-bottom: 1px solid #dcdcdc;
		margin-top: 0.75rem;
		margin-bottom: 1rem;
	}

	.time {
		color: #999999;
		font-size: 0.75rem;

		span {
			color: #FF9D5E;
		}
	}

	.pinfen img {
		width: 1rem;
		height: 0.9375rem;
		margin: 0 0.1875rem;
	}
</style>
